<template>
    <div>
<!--        登录的上边框-->
        <div class="top1">
<!--            登录上框的左侧边框-->
            <div class="flex_left">
<!--                右侧边框的--图片logo-->
                <div class="top1_img">
                    <img :src="this.img.logo" alt="动态logo" title="logo">
                </div>
<!--                “欢迎--的标语”-->
                <div class="top1_welcome">
                    <img :src="this.img.welcome" alt="欢迎" title="欢迎">
                </div>
            </div>
<!--           登录上框的右侧边框-- 调查文件的图片和通知-->
            <div class="top1_survey">
                    <img :src="this.img.survey">
                    <a href="">登录页面，调查问卷</a>
            </div>
        </div>
<!--        依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<span class="text_span">《京东隐私政策》</span>
                    已上线，将更有利于保护您的个人隐私。-->
        <div class="top2">
            <div class="top2_img">
                <img :src="this.img.top2_img">
            </div>
            <div class="top2_text">
                <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<span class="text_span">《京东隐私政策》</span>
                    已上线，将更有利于保护您的个人隐私。
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TopLogin",
    components: {

    },
    props: {
    },
    data() {
        return {
            img:{
                //京东logo
                logo:require('@/assets/logo/img.png'),
                //欢迎图片
                welcome:require('@/assets/l-icon.png'),
                 //调查问卷
                survey:require('@/assets/q-icon.png'),
                //头部-下图片
                top2_img:require('@/assets/icon-tips.png'),
            }
        };
    },
    created() {


    },
    mounted() {

    },
    methods: {

    },
    //监听外部参数实时更新子组件内部变量
    watch: {
        index(newValue) {
            if (newValue) {
                this.activeIndex = newValue;
                return;
            }
        },
        immediate: true,
    },
};
</script>


<style scoped>
/**
 * @Description: 京东-图片栏
 * @author: 折耳狐
 * @date:
*/

/*top1的总模版*/
.top1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 990px;
    height: auto;
}


/*图片logo*/
.flex_left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/*冬天logo的div框*/
.top1_img{
    width: 170px;
    height: 60px;
}
.top1_img img{
    width: 170px;
    height: 60px;
    object-fit: fill;
}
/*欢迎图片*/
.top1_welcome{
    /*缩放大小*/
    width: 170px;
    height: auto;
}
/*问卷调查*/
.top1_survey{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    bottom: 2px;
    float: right;

    width: 150px;
    height: 50px;
}
.top1_survey a{
    position: relative;
    border-bottom: 0px;
    border-bottom: 0px;
    color: #999;
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
.top1_survey a:hover{
    color: red;
    text-decoration: underline;
}
/* 依据《网络安全法》，为保障您的账户安全和正常使
用，请尽快完成手机号验证！ 新版《京东隐私政策》 已上线，将更有利于保护您的个人隐私。
*/

/*top的总模版*/
.top2{
    display: flex;
    justify-content:center;
    align-items: center;
    background: #fff8f0;
    width: 100%;
    text-align: center;
}




.top2_img{
    display: flex;
    align-items: center;
}
.top2_text p{
    vertical-align: middle;
    color: #999;
    font-size: 12px;
    display: inline-block;
}
.text_span{
    color: black;
}
.text_span:hover{
    color: #333;
    text-decoration: underline;
}
</style>